<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--管控措施类型数据-->
      <el-col :span="5" :xs="24">
        <div class="head-container">
          <el-input
            v-model="classFyName"
            placeholder="请输入管控措施类型名称"
            clearable
            prefix-icon="Search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="classFyList"
            :props="{ label: 'classfyName', children: 'children' }"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="classFyRef"
            node-key="classfyId"
            :current-node-key="checkNode"
            highlight-current
            :default-expand-all="true"
            @node-click="handleNodeClick"
          >
            <template class="custom-tree-node" #default="{ node, data }">
              <div
                style="
                  display: flex;
                  align-items: flex-start;
                  justify-content: space-between;
                  width: 100%;
                "
              >
                <el-tooltip :content="node.label" placement="top">
                  <span
                    style="
                      padding-left: 4px;
                      width: 70%;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      -o-text-overflow: ellipsis;
                    "
                  >
                    {{ node.label }}
                  </span>
                </el-tooltip>
                <span style="width: 30%; display: flex">
                  <el-tooltip
                    content="更新"
                    placement="top"
                    v-if="data.isSystem !== '0' && data.nodeLevel == '3'"
                  >
                    <el-button
                      link
                      type="primary"
                      icon="Edit"
                      @click="handleClassFyUpdate(data)"
                      v-hasPermi="['risk:classfy:edit']"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                    content="删除"
                    placement="top"
                    v-if="data.isSystem !== '0' && data.nodeLevel == '3'"
                  >
                    <el-button
                      link
                      type="primary"
                      icon="Delete"
                      @click="handleClassFyDelete(data)"
                      v-hasPermi="['risk:classfy:remove']"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                    content="新增"
                    placement="top"
                    v-if="data.parentId !== 0 && data.nodeLevel == '2'"
                  >
                    <el-button
                      link
                      type="primary"
                      icon="Plus"
                      @click="handleClassFyAdd(data)"
                      v-hasPermi="['risk:classfy:add']"
                    ></el-button>
                  </el-tooltip>
                </span>
              </div>
            </template>
          </el-tree>
        </div>
      </el-col>

      <!--管控措施内容数据-->
      <el-col :span="19" :xs="24">
        <el-row :gutter="10" class="mb8 right">
          <el-col :span="24" style="display: flex; justify-content: end">
            <el-button
              type="primary"
              icon="Plus"
              @click="handleAdd"
              v-hasPermi="['risk:measure:add']"
              >新增管控措施</el-button
            >
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="measureShowList">
          <el-table-column
            label="管控措施类型"
            align="center"
            key="measureClassfyName"
            prop="measureClassfyName"
            width="250"
          />
          <el-table-column
            label="管控措施名称"
            align="center"
            key="riskMeasureDesc"
            prop="riskMeasureDesc"
          />
          <el-table-column label="创建时间" align="center" prop="createdAt" width="160">
            <template #default="scope">
              <span>{{ parseTime(scope.row.createdAt) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="280"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1">
                <el-button
                  link
                  type="primary"
                  icon="Edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['risk:measure:edit']"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1">
                <el-button
                  link
                  type="primary"
                  icon="Delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['risk:measure:remove']"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.current"
          v-model:limit="queryParams.size"
          @pagination="getMeasureList"
        />
      </el-col>
    </el-row>
    <!-- 添加或修改管控措施对话框 -->
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form :model="measureForm" :rules="rules" ref="measureRef" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属分类:" label-width="140px">
              <el-tree-select
                v-model="measureForm.measureClassfyId"
                :data="classFyList"
                ref="measureSelect"
                :props="{
                  value: 'classfyId',
                  label: 'classfyName',
                  children: 'children',
                  class: 'customNodeClass',
                }"
                value-key="classfyId"
                placeholder="请选管控措施所属类型"
                @node-click="checkType"
                filterable
              >
                <template
                  class="custom-tree-node"
                  #default="{ node, data }"
                  :disabled="data.nodeLevel == '1'"
                >
                  <span>{{ node.label }}</span>
                  <!-- <span v-if="data.nodeLevel=='1'">{{ node.label }}</span>
                            <span v-if="data.nodeLevel=='2'">{{ node.parent.data.classfyName+"-"+data.classfyName }}</span>
                            <span v-if="data.nodeLevel=='3'">{{ node.parent.parent.data.classfyName+"-"+node.parent.data.classfyName+"-"+data.classfyName }}</span> -->
                </template>
              </el-tree-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="管控措施内容:"
              label-width="140px"
              prop="riskMeasureDesc"
            >
              <el-input
                type="textarea"
                :rows="3"
                v-model="measureForm.riskMeasureDesc"
                placeholder="请输入管控措施"
                maxlength="3000"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--新增或修改管控措施类型-->
    <el-dialog :title="titleClassFy" v-model="openClassFy" width="680px" append-to-body>
      <el-form
        ref="classFyFormRef"
        :model="classFyForm"
        :rules="classfyRules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属类型">
              <el-tree-select
                v-model="classFyForm.parentId"
                disabled
                :data="classFyOptions"
                :props="{ value: 'id', label: 'label', children: 'children' }"
                value-key="id"
                placeholder="选择所属上级类型"
                check-strictly
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型名称" prop="classfyName">
              <el-input
                v-model="classFyForm.classfyName"
                placeholder="请输入管控措施类型名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitClassFyForm">确 定</el-button>
          <el-button @click="cancelClassFy">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="Measure">
import {
  listMeasureClassFy,
  updateMeasureClassFy,
  addMeasureClassFy,
  deleteMeasureClassFy,
  getMeasureClassFy,
  getMeasureClassFyTree,
} from "@/api/prevent/risk/classfy";
import {
  listMeasure,
  addMeasure,
  deleteMeasure,
  updateMeasure,
  getMeasureInfo,
} from "@/api/prevent/risk/measure";
const { proxy } = getCurrentInstance();
const loading = ref(true);
const openClassFy = ref(false);
const open = ref(false);
const title = ref("");
const titleClassFy = ref("");
const total = ref(0);
const checkNode = ref(undefined);
const checkMeasureNode = ref(undefined);
const checkNodeName = ref(undefined);
const checkNodeClassfy1 = ref("");
const checkNodeClassfy2 = ref("");
const checkNodeClassfy3 = ref("");
const classFyList = ref([]);
const classFyOptions = ref([]);
const measureShowList = ref([]);
const classFyName = ref("");
const data = reactive({
  measureForm: {},
  classFyForm: {},
  rules: {
    classfyName: [
      { required: true, message: "管控措施类型名称不能为空", trigger: "blur" },
      {
        min: 2,
        max: 100,
        message: "用户名称长度必须介于 2 和 100 之间",
        trigger: "blur",
      },
    ],
  },
  classfyRules: {
    classfyName: [
      { required: true, message: "管控措施类型名称不能为空", trigger: "blur" },
      {
        min: 2,
        max: 100,
        message: "用户名称长度必须介于 2 和 100 之间",
        trigger: "blur",
      },
    ],
  },
  queryParams: {
    current: 1,
    size: 10,
    measureClassfyId: undefined,
  },
});
const { measureForm, queryParams, classFyForm, rules, classfyRules } = toRefs(data);

/**------------管控措施类型---------------- */

/** 查询管控措施类型下拉树结构 */
function getClassFyTree() {
  getMeasureClassFyTree().then((response) => {
    classFyOptions.value = response.data;
  });
}

/** 查询管控措施类型列表 */
function getClassFyList() {
  loading.value = true;
  listMeasureClassFy().then((response) => {
    if (response.data.length > 0) {
      checkNode.value = response.data[0].classfyId;

      classFyList.value = proxy.handleTree(response.data, "classfyId");

      loading.value = false;
      queryParams.value.measureClassfyId = checkNode.value;
      getMeasureList();
    }
  });
  getClassFyTree();
}

/** 根据名称筛选管控措施类型 */
watch(classFyName, (val) => {
  proxy.$refs["classFyRef"].filter(val);
});

/** 节点单击事件 */
function handleNodeClick(data, node) {
  checkNode.value = data.classfyId;
  queryParams.value.measureClassfyId = data.classfyId;
  checkType(data, node);
  getMeasureList();
}

/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.classfyName.indexOf(value) !== -1;
};

/** 管控措施类型表单重置 */
function resetClassFy() {
  classFyForm.value = {
    classfyId: undefined,
    parentId: checkNode.value,
    classfyName: undefined,
    classfyCode: "",
  };
  proxy.resetForm("classFyFormRef");
}
/** 添加管控措施类型 */
function handleClassFyAdd(row) {
  if (row.nodeLevel !== "2") {
    proxy.$modal.msgSuccess("自定义类型只能处于第三级节点");
  }
  resetClassFy();
  if (row != null && row.classfyId) {
    classFyForm.value.parentId = row.classfyId;
  } else {
    classFyForm.value.parentId = 0;
  }
  openClassFy.value = true;
  titleClassFy.value = "添加管控措施类型";
}
/** 删除管控措施类型按钮操作 */
function handleClassFyDelete(row) {
  proxy.$modal
    .confirm('是否确认删除名称为"' + row.classfyName + '"的数据项?')
    .then(function () {
      return deleteMeasureClassFy(row.classfyId);
    })
    .then(() => {
      getClassFyList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}
/** 修改管控措施类型按钮操作 */
async function handleClassFyUpdate(row) {
  resetClassFy();
  getMeasureClassFy(row.classfyId).then((response) => {
    classFyForm.value = response.data;
    openClassFy.value = true;
    titleClassFy.value = "修改管控措施类型";
  });
}

/** 提交管控措施类型 */
function submitClassFyForm() {
  proxy.$refs["classFyFormRef"].validate((valid) => {
    if (valid) {
      if (classFyForm.value.classfyId != undefined) {
        updateMeasureClassFy(classFyForm.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          openClassFy.value = false;
          getClassFyList();
        });
      } else {
        addMeasureClassFy(classFyForm.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          openClassFy.value = false;
          getClassFyList();
        });
      }
    }
  });
}
/** 取消管控措施类型按钮 */
function cancelClassFy() {
  openClassFy.value = false;
  resetClassFy();
}

/**------------管控措施---------------- */
/** 获取管控措施列表 */

function getMeasureList() {
  loading.vue = true;
  listMeasure(queryParams.value).then((res) => {
    loading.value = false;
    measureShowList.value = res.data.dataList;
    total.value = res.data.totalNum;
  });
}
/** 重置表单 */
function reset() {
  measureForm.value = {
    measureClassfyId: checkMeasureNode.value,
    measureClassfyName: checkNodeName.value,
    classfy1: checkNodeClassfy1.value,
    classfy2: checkNodeClassfy2.value,
    classfy3: checkNodeClassfy3.value,
  };
  proxy.resetForm("measureRef");
}

/** 添加管控措施 */
function handleAdd() {
  reset();
  // measureForm.value.measureClassfyId = checkNode.value;
  measureForm.value = {
    measureClassfyId: checkNode.value,
    measureClassfyName: checkNodeName.value,
    classfy1: checkNodeClassfy1.value,
    classfy2: checkNodeClassfy2.value,
    classfy3: checkNodeClassfy3.value,
  };
  open.value = true;
  title.value = "添加管控措施";
  console.log("添加时候的表单：", measureForm.value);
}
/** 编辑管控措施 */
function handleUpdate(row) {
  reset();

  getMeasureInfo(row.measureId).then((response) => {
    measureForm.value = response.data;
    proxy.$refs["classFyRef"].setChecked(response.data.measureClassfyId, true);
    open.value = true;
    title.value = "编辑管控措施";
  });
}

/** 删除管控措施 */
function handleDelete(row) {
  proxy.$modal
    .confirm('是否确认删除名称为"' + row.riskMeasureDesc + '"的数据项?')
    .then(function () {
      return deleteMeasure(row.measureId);
    })
    .then(() => {
      getMeasureList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}
/** 提交管控措施表单按钮 */
function submitForm() {
  proxy.$refs["measureRef"].validate((valid) => {
    if (valid) {
      if (measureForm.value.measureId != undefined) {
        updateMeasure(measureForm.value).then((response) => {
          proxy.$modal.msgSuccess("修改管控措施成功");
          open.value = false;
          getMeasureList();
        });
      } else {
        addMeasure(measureForm.value).then((response) => {
          proxy.$modal.msgSuccess("新增管控措施成功");
          open.value = false;
          getMeasureList();
        });
      }
    }
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 监听表单选择事件 */
function checkType(data, node) {
  checkMeasureNode.value = data.classfyId;
  if (data.nodeLevel == "1") {
    checkNodeClassfy1.value = data.classfyId;
    checkNodeName.value = data.classfyName;
    measureForm.value.measureClassfyName = data.classfyName;
    measureForm.value.classfy1 = data.classfyId;
  } else if (data.nodeLevel == "2") {
    checkNodeClassfy1.value = node.parent.data.classfyCode;
    checkNodeClassfy2.value = data.classfyCode;

    measureForm.value.measureClassfyName =
      node.parent.data.classfyName + "-" + data.classfyName;
    measureForm.value.classfy1 = node.parent.data.classfyCode;
    checkNodeName.value = measureForm.value.measureClassfyName;
    measureForm.value.classfy2 = data.classfyCode;
  } else if (data.nodeLevel == "3") {
    measureForm.value.measureClassfyName =
      node.parent.parent.data.classfyName +
      "-" +
      node.parent.data.classfyName +
      "-" +
      data.classfyName;
    checkNodeName.value = measureForm.value.measureClassfyName;
    checkNodeClassfy1.value = node.parent.parent.data.classfyCode;
    checkNodeClassfy2.value = node.parent.data.classfyCode;
    checkNodeClassfy3.value = data.classfyName;
    measureForm.value.classfy1 = node.parent.parent.data.classfyCode;
    measureForm.value.classfy2 = node.parent.data.classfyCode;
    measureForm.value.classfy3 = data.classfyName;
  }
}
//初始化调用
getClassFyList();
</script>
